<template>
	<view class="page">
		<view @click="navTo" class="getting">
			<view class="getting-image"><image src="/static/icons/tree.png" mode=""></image></view>
			<view class="getting-title">已收获{{ finishCount }}棵</view>
		</view>
		<view class="list">
			<view @click="selectTree(index)" :class="selectIndex == index ? 'select' : ''" :key="index" v-for="(item, index) in list" class="list-item">
				<image class="list-item-left" :src="item.imgUrl" mode=""></image>
				<view class="list-item-right">
					<view class="title">{{ item.fruitName }}</view>
					<!-- <view class="desc">3200</view> -->
					<view class="desc">{{ item.needGrowthValue }}成长值</view>
					<view class="button">{{ item.levelName }}可领</view>
				</view>
			</view>
		</view>
		<view @click="handlePlan" class="button-plan"><image src="/static/icons/plan.png" mode=""></image></view>
	</view>
</template>

<script>
import Navbar from '@/components/Navbar.vue';
import { seedList, plantFinishCount, receiveSeed } from '@/service/farm.js';
export default {
	components: {
		Navbar
	},
	data() {
		return {
			list: [],
			selectIndex: 0,
			finishCount: 0
		};
	},
	onLoad(options) {
		this.getList();

		plantFinishCount().then(v => {
			this.finishCount = v;
		});
	},
	methods: {
		selectTree(index) {
			this.selectIndex = index;
		},
		navTo() {
			uni.navigateTo({
				url: 'harvested'
			});
		},
		async getList() {
			this.list = await seedList();
		},
		async handlePlan() {
			try {
				uni.showLoading();
				await receiveSeed({ seedId: this.list[this.selectIndex].id }, { loading: true });
				uni.redirectTo({ url: 'index' });
			} catch (e) {
				//TODO handle the exception
			} finally {
				uni.hideLoading();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
view {
	display: flex;
	box-sizing: border-box;
}
.page {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: $tree-bg;
}
.getting {
	width: 710upx;
	height: 150upx;
	margin: 20upx auto;
	background: #e4f6c0;
	border-radius: 20upx;
	display: flex;
	align-items: center;
	padding: 10upx 40upx;

	&-image {
		background-color: #ffffff;
		border-radius: 50%;
		margin-right: 30upx;
		image {
			height: 110upx;
			width: 80upx;
		}
	}
	&-title {
		color: #4e8308;
		font-size: 40upx;
	}
}
.list {
	display: flex;
	flex-wrap: wrap;
	width: 710upx;
	margin: 0 auto;
	justify-content: space-between;
	.list-item {
		height: 230upx;
		width: 350upx;
		margin-bottom: 20upx;
		background: #e4f6c0;
		display: flex;
		border-radius: 20upx;
		padding: 20upx 10upx 20upx 20upx;
		align-items: center;
		&-left {
			height: 180upx;
			width: 150upx;
			margin-right: 2upx;
		}
		&-right {
			display: flex;
			flex-direction: column;
			flex: 1;
			.title {
				color: #588918;

				font-size: 28upx;
			}
			.desc {
				margin-top: 6upx;
				color: #4e8308;
				font-size: 24upx;
			}
			.button {
				margin-top: 10upx;
				font-size: 16upx;
				color: #ffffff;
				background: linear-gradient(to right, #ff6f1f, #ff7121);
				border-radius: 30upx;
				padding: 5upx 10upx;
			}
		}
	}
}
.button-plan {
	width: 330upx;
	height: 80upx;
	margin: 20upx auto 0;
	image {
		width: 330upx;
		height: 84upx;
	}
}
.select {
	background: rgba($color: #55b316, $alpha: 0.4) !important;
}
</style>
